<template>

    时间:<el-date-picker v-model="page.leaveStartTime" type="date" placeholder="请选择日期" />
    -
    <el-date-picker v-model="page.leaveEndTime" type="date" placeholder="请选择日期" />
    审批状态:<el-select v-model="page.approvalState" placeholder="请选择" style="width: 240px" clearable>
        <el-option label="待审批" :value="0" />
        <el-option label="已审批" :value="1" />
    </el-select>
    用户名称: <el-input v-model="page.userName" style="width: 200px;" />
    <el-button type="primary" @click="getLeaveList">查询</el-button>

    <el-table border :data="leaveList" style="width: 100%;border-collapse: collapse;">
        <el-table-column prop="userName" label="姓名" width="70" />
        <el-table-column prop="departmentId" label="部门" width="70">
            <template v-slot="scope">
                <span v-if="scope.row.departmentId == 1">IT信息部</span>
                <span v-else-if="scope.row.departmentId == 2">人力资源部</span>
                <span v-else-if="scope.row.departmentId == 3">财务部</span>
                <span v-else-if="scope.row.departmentId == 4">销售部</span>
                <span v-else>行政部</span>
            </template>
        </el-table-column>
        <el-table-column prop="leaveType" label="请假类别" width="90" />
        <el-table-column label="请假时间" width="182">
            <template v-slot="scope">
                {{ scope.row.leaveStartTime.replace("T", ' ').substring(0, 10) }}至{{ scope.row.leaveEndTime.replace("T",
        ' ').substring(0, 10) }}
            </template>
        </el-table-column>
        <el-table-column prop="totalHour" label="总时长(H)" width="86" />
        <el-table-column label="报到时间" width="97">
            <template v-slot="scope">
                {{ scope.row.reportedTime.replace("T", ' ').substring(0, 10) }}
            </template>
        </el-table-column>
        <el-table-column prop="leaveReason" label="请假事由" width="90" />
        <el-table-column prop="departmentHeads" label="部门领导" width="81" />
        <el-table-column prop="approvalState" label="审批状态" width="81">
            <template v-slot="scope">
                <el-tag v-if="scope.row.approvalState == 1" type="success">已审核</el-tag>
                <el-tag v-else type="danger">待审核</el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="98">
            <template v-slot="scope">
                {{ scope.row.createTime.replace("T", ' ').substring(0, 10) }}
            </template>
        </el-table-column>
        <el-table-column label="操作" width="250">
            <template v-slot="scope">
                <el-button :disabled="scope.row.approvalState == 1" link type="primary"
                    @click="jumpUpdate(scope.row.leaveId)">修改</el-button>
                <el-button :disabled="scope.row.approvalState == 1" link type="danger"
                    @click="delLeave(scope.row)">删除</el-button>
                <el-button link type="warning" @click="jumpApproval(scope.row.leaveId)">审批</el-button>
                <!-- v-show="scope.row.approvalState==1" -->
            </template>
        </el-table-column>
    </el-table>

    <table>
        <tr>
            <td>
                <el-pagination v-model:current-page="page.pageIndex" v-model:page-size="page.pageSize"
                    :page-sizes="[3, 5, 8]" :background="true" layout="total, slot, prev, pager, next" prev-text="上一页"
                    next-text="下一页" :total="page.totalCount" @size-change="handleSizeChange"
                    @current-change="handleCurrentChange">
                    <span>,每页{{ page.pageSize }}条,当前第{{ page.pageIndex }}/{{ page.totalPage }}页</span>
                    <el-button @click="handleCurrentChange(1)" :disabled="page.pageIndex == 1"
                        class="btn-prev">首页</el-button>
                </el-pagination>
            </td>
            <td>
                <el-pagination v-model:current-page="page.pageIndex" v-model:page-size="page.pageSize"
                    :page-sizes="[3, 5, 8]" :background="true" layout="slot, sizes, jumper" prev-text="上一页"
                    next-text="下一页" :total="page.totalCount" @size-change="handleSizeChange"
                    @current-change="handleCurrentChange">
                    <el-button @click="handleCurrentChange(page.totalPage)" :disabled="page.pageIndex == page.totalPage"
                        class="btn-prev">尾页</el-button>
                </el-pagination>
            </td>
        </tr>
    </table>

</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import axios from 'axios'
import { useRoute, useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
const route = useRoute();
const router = useRouter();
const form = reactive({
})

//分页
const page = reactive({
    leaveStartTime: '',
    leaveEndTime: '',
    approvalState: '',
    userName: '',
    pageIndex: 1,
    pageSize: 3,
    totalCount: 0,
    totalPage: 0
})

const leaveList = ref([])
const getLeaveList = () => {
    axios.get("/api/Leave/GetLeaveList", {
        params: {
            LeaveStartTime: page.leaveStartTime,
            LeaveEndTime: page.leaveEndTime,
            ApprovalState: page.approvalState || 0,
            UserName: page.userName,
            PageIndex: page.pageIndex,
            PageSize: page.pageSize
        }
    })
        .then(res => {
            leaveList.value = res.data.data.list
            page.totalCount = res.data.data.totalCount
            page.totalPage = res.data.data.totalPage
            // console.log(leaveList.value)
        })
        .catch(err => {
            console.log(err);
        })
}
//分页
const handleSizeChange = (val: number) => {
    page.pageSize = val;
    getLeaveList();
}
const handleCurrentChange = (val: number) => {
    page.pageIndex = val;
    getLeaveList();
}

//删除
const delLeave = (row: any) => {

    ElMessageBox.confirm(
        '确定要删除吗?',
        '警告',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            axios.post("/api/Leave/Delete", row)
                .then(res => {
                    if (res.data.code == 0) {
                        ElMessage.success("删除成功");
                        getLeaveList();
                    }
                })
                .catch(err => {
                    console.log(err);
                })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '已取消该操作',
            })
        })
}

//跳转修改
const jumpUpdate = (leaveId: any) => {
    router.push({
        name: 'LeaveUpdate',
        query: {
            leaveId: leaveId
        }
    })
}

//跳转审批
const jumpApproval = (leaveId: any) => {
    router.push({
        name: 'LeaveApproval',
        query: {
            leaveId: leaveId
        }
    })
}

onMounted(() => {
    getLeaveList()
})
</script>